<template>
	<view class="full box relative user-wrapper bg-primary" :style="{'--height':statusBarHeightValue}">
		<!-- <view class="custom-navbar"></view> -->
		<view class="header-wrap">
			<view class="absolute inset" style="z-index: 1;">
				<image :src="sourceUrl + '/user-mask.png'" class="full" mode="aspectFill"></image>
			</view>
			<view class="fixed-header-inner">
				<view class="userinfo-wrap box">
					<view class="avatar-wrap" @click="previewImage">
						<u-image :src="userInfo.avatar" width="112rpx" height="112rpx" shape="circle"></u-image>
					</view>
					<view class="vip-wrap"
						:style="[{'--level-progress':vipData.progress,'--level-color':vipData.levelColor}]">
						<view class="level-image flex">
							<image :src="vipData.dengji_icon_image" mode="aspectFill" class="level-icon"></image>
							<view class="username">
								<text>{{ userInfo.nickname }}</text>
							</view>
						</view>
						<view class="level-progress">
							<view class="pregress-inner"></view>
						</view>
						<div class="level-desc">
							<text class="current-value">{{ vipData.current_li_cheng }}</text>
							<text>/</text>
							<text class="current-value">{{ vipData.next_li_cheng }}</text>
							<text class="update-text">升级VIP{{ vipData.nextLevel }}</text>
						</div>
						<!-- <image mode="aspectFill" src="/static/v1.png" class="vip-image"></image> -->
					</view>
					<!-- <view class="info-header-wrap">
						<view class="top-wrap">
							<view class="username">
								<text>{{ userInfo.nickname }}</text>
							</view>
							<view class="edit-btn" @click="toEditUserInfo">
								<image mode="aspectFill" :src="sourceUrl + '/edit.png'" class="edit-icon"></image>
								<text class="edit-title">编辑资料</text>
							</view>
						</view>
						<view class="user-id">
							<text>{{ userInfo.account }}</text>
						</view>
					</view> -->
				</view>
				<view class="account-wrap">
					<view class="account-left">
						<view class="account-count">
							<image :src="sourceUrl + '/jifen.png'" class="account-icon"></image>
							<text class="account-label">总积分</text>
						</view>
						<view class="account-value">
							<text>{{ userInfo.score || '0.00' }}</text>
						</view>
					</view>
					<view class="sign-in-btn" @click="toUrl('/pages-bundle/sign-in/sign-in')">
						<text>签到领积分</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main-wrap">
			<view class="main-inner">
				<view class="header">
					<text>我的出行</text>
				</view>
				<view class="main-line"></view>
				<view class="main-list">
					<view class="main-item" v-for="(item,index) in mainList" :key="index"
						@click="toOrderPage(item.value)">
						<image :src="item.icon" mode="aspectFill" class="main-icon"></image>
						<text class="main-label">{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="menus-wrap">
			<view class="menus-inner">
				<view class="header">
					<text>我的服务</text>
				</view>
				<view class="menus-line"></view>
				<view class="menu-list">
					<template v-for="(item,index) in menuList">
						<view v-if="!item.hidden" class="menu-item" :key="index" @click="clickMenu(item)">
							<image mode="aspectFill" :src="item.icon" class="menu-icon"></image>
							<text class="menu-label">{{ item.label }}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
		<service-popup :show="showPopup" @close="closeHandle" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import ServicePopup from '@/pages/user/com/service.vue'
	export default {
		components: {
			ServicePopup
		},
		methods: {
			calcUserVipData(vipData) {
				function calcProgress(current, next) {
					return (current / next).toFixed(2) * 100 + '%'
				}
				const {
					user_info,
					level_list,
				} = vipData
				const {
					licheng,
					level
				} = user_info
				const targetLevelIndex = level_list.findIndex(item => item.id * 1 === level * 1)
				if (targetLevelIndex < 0) return
				const currentLevelTarget = level_list[targetLevelIndex]
				const nextLevelTarget = level_list[targetLevelIndex + 1]
				const {
					dengji_icon_image,
					fengmian_image,
					quanyi_image
				} = currentLevelTarget
				const hasNext = !!nextLevelTarget
				const nextLevel = hasNext ? nextLevelTarget.id * 1 : ''
				return {
					dengji_icon_image,
					currentLevel: level,
					nextLevel,
					hasNext,
					progress: hasNext ? calcProgress(licheng, nextLevelTarget.licheng) : "100%",
					fengmian_image,
					quanyi_image,
					current_li_cheng: licheng,
					next_li_cheng: hasNext ? nextLevelTarget.licheng : '0',
					levelColor: "#3a355f"
				}
			},
			async getUserVip() {
				const resp = await this.$request({
					url: "/vip/index",
					method: "POST"
				})
				const result = this.calcUserVipData(resp.data)
				if (!result) return
				this.vipData = result
			},
			toOrderPage(value) {
				uni.navigateTo({
					url: '/pages-bundle/order/index?active=' + value
				})
			},
			toEditUserInfo() {
				uni.navigateTo({
					url: '/pages-bundle/userinfo/userinfo'
				})
			},
			callFuncByName(name) {
				switch (name) {
					case "service":
						this.showPopup = true
						break;
				}
			},
			clickMenu(target) {
				const {
					path,
					name
				} = target
				if (!path && !!name) {
					this.callFuncByName(name)
					return
				}
				uni.navigateTo({
					url: path
				})
			},
			closeHandle(value) {
				this.showPopup = value
			},
			previewImage() {
				this.toEditUserInfo()
			},
		},
		computed: {
			...mapGetters(['userInfo', 'hasLogin', 'userIdentity']),
			menuList() {
				// 未登录0 1导游 2商家
				const {
					userIdentity,
					sourceUrl,
					userInfo
				} = this
				const hideGuide = userIdentity === 0 || userIdentity === 2;
				const hideShop = userIdentity === 0 || userIdentity === 1;
				return [{
						icon: sourceUrl + '/m1.png',
						label: '优惠券',
						path: '/pages-bundle/coupon/coupon',
					}, {
						icon: sourceUrl + '/jifenshangcheng.png',
						label: '积分商城',
						path: '/pages-bundle/sign-in/sign-in',
					}, {
						icon: sourceUrl + '/wodeshoucang_.png',
						label: '我的收藏',
						path: '/pages-bundle/my-collect/my-collect',
					}, {
						icon: sourceUrl + '/huiyuan.png',
						label: '我的会员',
						path: '/pages-bundle/vip/vip',
					}, {
						icon: sourceUrl + '/m5.png',
						label: '邀请有礼',
						path: '/pages-bundle/invite/invite',
					}, {
						icon: sourceUrl + '/m6.png',
						label: '意见反馈',
						path: '/pages-bundle/feedback/feedback',
					}, {
						icon: sourceUrl + '/m7.png',
						label: '联系客服',
						name: 'service'
					}, {
						icon: sourceUrl + '/xinxi.png',
						label: '关于我们',
						path: '/pages-bundle/about-us/about-us',
					}, {
						icon: sourceUrl + '/m9.png',
						label: '系统设置',
						path: '/pages-bundle/setting/setting',
					},
					{
						icon: sourceUrl + '/shenqingdaoyou-01.png',
						label: '导游认证',
						path: '/pages-bundle/guide-register/guide-register',
						// hidden: userIdentity >= 0,
					},
					{
						icon: sourceUrl + '/register.png',
						label: '商家认证',
						path: '/pages-bundle/shop-register/shop-register',
						hidden: userIdentity >= 1,
					},
					{
						icon: sourceUrl + '/gerenxinxi.png',
						label: '导游信息',
						path: `/pages-bundle/guide-detail/guide-detail?type=self&id=${userInfo.id}`,
						hidden: hideGuide,
					},
					{
						icon: sourceUrl + '/dingdan.png',
						label: '导游订单',
						path: '/pages-bundle/guide-order/guide-order',
						hidden: hideGuide,
					},
					{
						icon: sourceUrl + '/dingdan.png',
						label: '商家订单',
						path: '/pages-bundle/guide-order/guide-order',
						hidden: hideShop,
					}
				]
			},
			mainList() {
				const {
					sourceUrl
				} = this
				return [{
					icon: sourceUrl + '/dingdan_all.png',
					label: '全部订单',
					value: 0
				}, {
					icon: sourceUrl + '/user-money.png',
					label: '待付款',
					value: 1
				}, {
					icon: sourceUrl + '/user-clock.png',
					label: '待出行',
					value: 2
				}, {
					icon: sourceUrl + '/yiwancheng.png',
					label: '已完成',
					value: 3
				}]
			},
			statusBarHeightValue() {
				let height = uni.upx2px(88) + 'px'
				// #ifndef H5
				height = this.statusBarHeight_
				// #endif
				return height
			},
		},
		onShow() {
			if (!this.hasLogin) {
				return this.$toast({
					title: '您还没有登录'
				}, () => {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				})
			}
			this.$store.dispatch('getUserinfo')
			this.getUserVip()
		},
		data() {
			return {
				showPopup: false,
				vipData: {
					dengji_icon_image: "",
					currentLevel: 1,
					nextLevel: 1,
					hasNext: true,
					progress: '0%',
					fengmian_image: "",
					quanyi_image: "",
					current_li_cheng: "0",
					next_li_cheng: "0",
					levelColor: "#3a355f",
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';

	.user-wrapper {
		.vip-wrap {
			padding-left: 8rpx;
			box-sizing: border-box;

			.level-progress {
				margin-top: 8rpx;
				margin-left: 8rpx;
				width: 168rpx;
				height: 10rpx;
				background-color: #fff;
				box-sizing: border-box;
				position: relative;
				border-radius: 128rpx;
				overflow: hidden;

				.pregress-inner {
					width: var(--level-progress);
					height: 100%;
					background-color: var(--level-color);
				}
			}

			.level-desc {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: var(--level-color);
				margin-top: 16rpx;

				.update-text {
					margin-left: 12rpx;
					font-style: oblique;
					font-weight: bold;
				}

				.current-value {
					font-weight: bold;
					font-style: italic;
				}
			}

			.level-image {
				font-size: 0;
				display: flex;
				align-items: center;

				.username {
					height: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					line-height: 48rpx;
					margin-left: 16rpx;
				}

				.level-icon {
					width: 122rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>